<template>
	<view class="home">
		<!-- <u-skeleton
			:rows="20"
			title
			:loading="loadingList"
		></u-skeleton> -->

		<view class="home-search">
			<u-sticky>
				<u-search 
					v-model="keyword"
					@search="changeSearch"
					@custom="changeSearch"
					@change="changeSearch"
					:showAction="false"
					animation
					placeholder="请输入标题名称" ></u-search>
			</u-sticky>
		</view>
		
		<view v-if="!loadingList">
			<view v-if="!list.length" class="emptyBox">
				 <u-image src="http://cdn.uviewui.com/uview/empty/data.png"></u-image>
				<view class="txt u-tips-color">还没有数据，赶紧去添加吧</view>
			</view>
			
			<view 
				v-for="(_item, _index) in list"
				:key="_index" 
				class="box-inner m-t-30 combox">
				<view class="avatar flex align-center">
					<u-avatar 
						v-if="_item.images && _item.images.length" 
						:src="_item.images[0]" 
						mode="aspectFill"></u-avatar>
					<u-avatar v-else icon="photo-fill" fontSize="30"></u-avatar>
					<view class="title flex-sub flex align-center">
						<view>{{ _item.title }}</view>
					</view>
					<u-icon 
						v-if="hasLogin"
						@click="toEdit(_item)" 
						class="icon" 
						name="edit-pen" 
						size="28"
						color="#3c9cff"></u-icon>
					<u-icon 
						v-if="hasLogin"
						@click="delItem(_item, index, _index)" 
						class="icon" 
						name="trash" 
						size="26"
						color="#dd524d"></u-icon>
				</view>
				<u-divider></u-divider>
				<u-grid :border="false">
					<u-grid-item>
						<view>
							<text class="text">毛坯：</text>
							<text class="price">￥{{ _item.price_mp }}</text>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view>
							<text class="text">成品：</text>
							<text class="price">￥{{ _item.price_cp }}</text>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view>
							<text class="text">烫发：</text>
							<text class="price">￥{{ _item.price_tp }}</text>
						</view>
					</u-grid-item>
				</u-grid>
				
				<u-divider></u-divider>
				
				<view v-if="_item.images && _item.images.length" class="images">
					<view v-for="(__item, __index) in  _item.images" :key="__index" class="item">
						<image 
							@click="preview(__index, _item.images)" 
							:src="__item" 
							class="item-image" 
							mode="aspectFill"></image>
					</view>
				</view>
				
				<view class="actions flex flex-right m-t-30">
					<u-button 
						@click="viewSize(_item)" 
						:customStyle="btnStyle" 
						plain 
						type="primary" 
						text="查看尺寸"></u-button>
					<u-button 
						v-if="hasLogin"
						@click="viewStock(_item)" 
						:customStyle="btnStyle" 
						plain 
						type="error" 
						:text="`${hasLogin ? '编辑' : '查看'}库存`"></u-button>
				</view>
			</view>
			
			<view v-if="list.length" class="loadmore">
				<u-loadmore :status="loadstatus" />
			</view>
			
			<view v-if="hasLogin" class="goAdd" @click="toEdit">
				<u-icon name="plus" size="20" color="#fff"></u-icon>
			</view>
		</view>
		
		<!-- 查看尺寸 -->
		<u-popup :show="showSize" @close="closeTagPop">
			<view class="sizeBox">
				<view class="title">查看尺寸</view>
				<view class="inner flex flex-wrap">
					<view v-for="(tag, i) in allSizes" :key="i"  class="tag">
						<u-tag
							size="large"
							:text="tag.name" 
							borderColor="#f4f5f7" 
							bgColor="#f4f5f7" 
							color="#999"></u-tag>
					</view>
				</view>
			</view>
			<view class="sizeAction">
				<u-button class="btn" plain type="primary" @click="onCopy">复制</u-button>
			</view>
		</u-popup>
		
		<u-back-top :scroll-top="scrollTop" bottom="180rpx"></u-back-top>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbCmd = db.command
	import { 
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import { debounce } from '@/utils/common.js'
	
	export default {
		data() {
			return {
				hairTypes: [],
				btnStyle: {
					width: '200rpx',
					margin: '0 0 0 30rpx'
				},
				scrollTop: 0,
				loadingList: true,
				loadstatus: 'loadmore',
				pagesize: 6,
				list: [],
				keyword: '',
				showSize: false,
				allSizes: []
			}
		},
		computed: {
			hasLogin() {
				return store.hasLogin
			}
		},
		onReady() {
			uni.$on('refreshList', () => {
				this.getData(true)
			})
		},
		onUnload() {
			uni.$off('refreshList')
		},
		onReachBottom() {
			if (this.loadstatus == 'nomore') return
			this.getData()
		},
		onPullDownRefresh() {
			this.getData(true)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage() {
			let path = '/pages/index/index'
			
			return {
				title: '好先生假发',
				path: path
			}
		},
		onLoad() {
			this.getTypes()
		},
		methods: {
			getTypes() {
				db.collection('hxs-types').get().then(res => {
					this.hairTypes = res.result.data
				}).finally(() => {
					this.getData(true)
				})
			},
			getData(isFresh) {
				this.loadstatus = 'loading'
				if (isFresh) {
					uni.showLoading({
						title: '加载中...'
					})
					this.list = []
					this.loadingList = true
				}
				db.collection('hxs-list').where({
					title: new RegExp(this.keyword, 'ig')
				}).limit(this.pagesize).skip(this.list.length).get().then(res => {
					this.list = [...this.list, ...res.result.data]
					if (res.result.data.length < this.pagesize) {
						this.loadstatus = 'nomore'
					}
				}).finally(() => {
					this.loadingList = false
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			changeSearch(e) {
				debounce(this.getData(true))
			},
			
			toEdit(item) {
				uni.navigateTo({
					url: `/pages/edit/edit?id=${item._id || ''}`
				})
			},
			
			preview(index, urls) {
				uni.previewImage({
					current: index,
					urls,
					indicator: 'number',
					longPressActions: {
						success: function(data) {
							// console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg)
						}
					}
				})
			},
			
			delItem(item, pIndex, cIndex) {
				let arr = this.list[pIndex]
				uni.showModal({
					title: '删除提醒',
					content: '确定要删除该条信息吗？',
					success(cc) {
						if (cc.confirm) {
							db.collection('hxs-list').doc(item._id).remove().then(res => {
								arr.splice(cIndex, 1)
								uni.$u.toast('删除成功')
							})
						}
					}
				})
			},
			
			// 查看尺寸
			viewSize(item) {
				if (!item.stocks || !item.stocks.length) {
					uni.$u.toast('还没有尺寸信息')
					return
				}
				this.showSize = true
				this.allSizes = item.stocks
			},
			
			viewStock(item) {
				if (!item.stocks || !item.stocks.length) {
					uni.$u.toast('请先添加尺寸')
					return
				}
				uni.navigateTo({
					url: '/pages/stock/stock?id=' + item._id
				})
			},
			
			openTagPop() {},
			closeTagPop() {
				this.showSize = false
			},
			onCopy() {
				let arr = this.allSizes.map(item => item.name)
				uni.setClipboardData({
					data: arr.join('\n'),
					success(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail(err) {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			},
			goUserinfo() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.home {
	background: #f8f8f8;
	padding: 0 30rpx 30rpx;
	
	/* #ifdef H5 */
	// padding-top: 30rpx;
	/* #endif */
	&-search {
		padding-top: 30rpx;
	}
	
	.box {
		&-top {
			display: flex;
			align-items: center;
			.line {
				width: 6rpx;
				height: 40rpx;
				background: $u-primary;
				border-radius: $uni-border-radius-lg;
				margin-right: 20rpx;
			}
		}
		&-inner {
			.title {
				font-size: 32rpx;
				margin-left: 24rpx;
			}
			.price {
				color: $u-error;
				font-weight: bold;
			}
			.icon {
				margin-left: 10rpx;
			}
		}
	}
}
.images {
	display: flex;
	flex-wrap: wrap;
	margin-right: -24rpx;
	.item {
		display: flex;
		width: calc(50% - 24rpx);
		margin: 0 24rpx 24rpx 0;
		position: relative;
		&-image {
			width: 100%;
			height: 400rpx;
		}
	}
}
.goAdd {
	background: $u-primary;
}
.sizeBox {
	padding: 0 30rpx;
	.title {
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.tag {
		margin: 0 30rpx 30rpx 0;
	}
	.inner {
		max-height: 60vh;
		overflow-y: auto;
	}
}
.sizeAction {
	padding: 30rpx;
}
.loadmore {
	padding: 30rpx 0 0;
}
</style>
